JavaScript: How is "function x() {}" different from "x = function() {}" ?

Posted by jleedev on Stack Overflow See other posts from Stack Overflow or by jleedev
Published on 2009-11-30T08:22:45Z Indexed on 2010/04/07 21:33 UTC
Read the original article Hit count: 232

Filed under:
|

In the answers to this question, we read that function f() {} defines the name locally, while [var] f = function() {} defines it globally. That makes perfect sense to me, but there's some strange behavior that's different between the two declarations.

I made an HTML page with the script

onload = function() {
    alert("hello");
}

and it worked as expected. When I changed it to

function onload() {
    alert("hello");
}

nothing happened. (Firefox still fired the event, but WebKit, Opera, and Internet Explorer didn't, although frankly I've no idea which is correct.)

In both cases (in all browsers), I could verify that both window.onload and onload were set to the function. In both cases, the global object this is set to the window, and I no matter how I write the declaration, the window object is receiving the property just fine.

What's going on here? Why does one declaration work differently from the other? Is this a quirk of the JavaScript language, the DOM, or the interaction between the two?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about beginner